// 概念板块 
<script lang="ts">
export default {
  name: "conceptOfPlate",
};
</script>
<template>
  <div class="page-box h100 display-flex czbj">
    <n-data-table
      size="small"
      class="mt10"
      :max-height="800"
      :row-class-name="rowClassName"
      :pagination="paginationReactive"
      :columns="columns"
      :data="tableData"
      :single-line="false"
      remote
      @update:page="handlePageChange"
    />
    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>人气龙头</div>
      </template>
      <div>
        <p>所属板块：{{ Sector }}</p>
        <n-grid x-gap="10" y-gap="10" :cols="3" class="mt10">
          <n-gi v-for="(item, idx) in dataGetRqList" :key="idx">
            <n-card v-setColour="item.YIELD >= 0">
              <div
                class="display-flex sz"
                @click="
                  hf('stockDetails', {
                    code: item.SECURITY_CODE,
                    observetype: 12,
                  })
                "
              >
                <div class="flex-1">
                  <p>{{ item.SECURITY_NAME_ABBR }}</p>
                  <p>{{ item.SECURITY_CODE }}</p>
                </div>
                <div class="flex-1 tr">
                  <p>{{ item.NEWEST_PRICE }}</p>
                  <p>{{ item.YIELD }}%</p>
                </div>
              </div>
            </n-card>
          </n-gi>
        </n-grid>
      </div>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { h, ref, computed, reactive } from "vue";
import store from "../../store";
import { dxget } from "../../util/index";
import comp from "../../components/index";
import { hf, transferTimeYMD } from "../../util/index";
let tableData = ref([]);
let showModal = ref(false);
let Sector = ref();
const paginationReactive = reactive({
  page: 1,
  pageCount: 1,
  pageSize: 20,
});
let dataGetRqList = ref();
let columns = [
  {
    title: "板块名称",
    key: "f14",
    align: "center",
  },
  {
    title: "今日涨幅",
    key: "f3",
    align: "center",
  },
  {
    title: "净流入",
    key: "f62",
    align: "center",
  },
  {
    title: "操作",
    align: "center",
    key: "actions",
    width: 150,
    render(row) {
      return h(
        "div",
        {
          class: "ls sz",
          onClick: () => {
            Sector.value = row.f14;
            showModal.value = true;
            dataGetRq(row.mksd);
          },
        },
        "点击查看板块龙头"
      );
    },
  },
];
const initData = async () => {
  const { data }: any = await dxget("dc/getZDYLBDatagybk", {
    pn: paginationReactive.page,
    pz: paginationReactive.pageSize,
  });
  tableData.value = data.diff;
  paginationReactive.pageCount =
    parseInt("" + data.total / paginationReactive.pageSize) + 1;
};
initData();
const handlePageChange = (page) => {
  paginationReactive.page = page;
  initData();
};
const dataGetRq = async (bi) => {
  let { data }: any = await dxget("dc/dataGetRq", {
    bi,
  });
  dataGetRqList.value = data;
};
const rowClassName = (row, index) => {
  if (row.f3 >= 0) {
    return "red";
  }
  return "ls";
};
</script>
 <style scoped>
</style>